<script lang="ts" setup>

import router from "@/router/index"
import AIAssistance from "@/components/Common/AIAssistance.vue";
// https://element-plus.org/zh-CN/component/icon.html  如需更换  请按需选择
import {Delete, Histogram, HomeFilled, InfoFilled, UserFilled} from "@element-plus/icons-vue";
import {onMounted} from "vue"; // 确保路径正确
import Store from '@/store/Store'
function logout(){
  Store.commit('setCurrentUser', null);
  router.push('/login-register');
}
function selectedItem(item: string) {
  router.push({path: item});
}
onMounted(() => {
  console.log("34567890"+Store.state.CurrentUser)
});
</script>
<template>
  <AIAssistance></AIAssistance>
  <el-container id="container" style="overflow-x: hidden">
    <el-aside width="200px" style="height: 98%;border-radius: 0 0 0 20px;overflow: hidden;">
      <el-container id="top" style="min-width: 200px">
        <div style="margin:auto;color:#ffffff;font-size:21px; font-weight: bold;">
          新苗-学生系统
        </div>
      </el-container>
      <el-menu
          :default-active="$route.path"
          style="height:94%;"
          text-color="#fff"
          active-text-color="#ffd04b"
          @select="selectedItem"
      >
        <el-menu-item index="/User/initialize-component" style="font-size: 20px">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          首页
        </el-menu-item>
        <el-sub-menu index="1" class="el-menu-item1">
          <template #title>
            <el-icon>
              <UserFilled/>
            </el-icon>
            <span style="font-size: 17px">吃喝住行</span>
          </template>
          <el-sub-menu index="1-1" class="el-menu-item22">
            <template #title>
              <span style="font-size: 17px">食宿信息</span>
            </template>
            <el-menu-item index="/User/dormitory-information">宿舍信息</el-menu-item>
            <el-menu-item index="/User/canteen-information">食堂信息</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/User/map-information">学校地图</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2" class="el-menu-item1">
          <template #title>
            <el-icon>
              <Histogram/>
            </el-icon>
            <span style="font-size: 17px">校园Part</span>
          </template>
          <el-menu-item index="/User/organization-information">组织信息</el-menu-item>
          <el-menu-item index="/User/professional-information">专业信息</el-menu-item>
          <el-menu-item index="/User/scholarship-information">奖学金信息</el-menu-item>
          <el-menu-item index="/User/loan-information">贷款信息</el-menu-item>
          <el-menu-item index="/User/grants-information">助学金信息</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3" class="el-menu-item1">
          <template #title>
            <el-icon>
              <InfoFilled/>
            </el-icon>
            <span style="font-size: 17px">个人信息</span>
          </template>
          <el-menu-item index="/User/user-information">个人信息</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-main style="padding:0">
      <el-header style="margin:0;padding:0;" height="60px">
        <el-container
            style="width: 99%;background:linear-gradient(to left,#42d392,#fdfdfd);margin:0;padding:0;height:60px;border-radius: 0 20px 0 0">
          <div style="margin-top: -25px;margin-left: 30px">
            <h2 style="display: flex; align-content: center; justify-content: space-around; width: 600px; margin-top: 40px">
              <el-text>您的账号ID：{{ Store.state.CurrentUser?.['uid'] || '未登录' }}</el-text>
              <br>
              <el-text>您的用户名：{{ Store.state.CurrentUser?.['uname'] || '未登录' }}</el-text>
            </h2>
          </div>
          <div style="margin: auto 50px auto auto;">
            <el-button type="danger" style="font-size: 20px;height: fit-content;font-weight: bolder;" @click="logout">
              注销
              <el-icon style="margin-left: 10px">
                <Delete/>
              </el-icon>
            </el-button>
          </div>
        </el-container>
      </el-header>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<style scoped>
#container {
  height: 100%;
  width: 100%;
  position: absolute;
}

.el-sub-menu {
  font-weight: bolder;
}

.el-menu-item {
  background: linear-gradient(to right, #42d392, #647eff);
  font-weight: bolder;
  font-size: 15px;
}

.el-menu-item22 {
  background: linear-gradient(to right, #42d392, #647eff);
  font-weight: bolder;
  font-size: 15px;
}


#top {
  background: linear-gradient(to right, #42d392, #647eff);
  border-radius: 20px 0 0 0;
  margin-right: 1px;
  text-align: center;
  height: 60px;
}

.el-menu {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
}
</style>

